@import "variables"

$card-between-distance: 1.25rem
$deck-margin-left: 3rem
$deck-margin-right: 2rem

.display-container
    @include page-height
    @include container-bg-image
    position: relative
    margin: 0
    padding-left: 0rem
    padding-right: 0rem

    .card-deck
        padding-top: 0.25rem


.display-reminder
    padding: 0
    margin: 0
    width: 100%
    position: sticky
    top: -1px
    left: 0
    z-index: 500

    &.active-sticky
        backdrop-filter: saturate(180%) blur(20px)
        background-color: #FFFFFF90
        border-bottom: 1px solid rgba(0, 0, 0, 0.16)
        box-shadow: 0 1px 2px #DCDFEF32


.reminder
    $symbol-2radius: 0.875rem

    &-wrapper
        width: 100%
        height: auto
        min-height: 100%
        padding-top: 1.25rem
        padding-bottom: 0.75rem
        padding-left: $deck-margin-left + ($card-between-distance / 2)
        padding-right: $deck-margin-right + ($card-between-distance / 2) + 5rem
        margin: 0
        position: absolute
        top: 0
        left: 0
        z-index: 1
        
    &-head
        margin-bottom: 0.25rem
        font-size: 0
        position: relative

    &-title
        @include mid-title-semibold
        color: $font-black

    &-symbol
        content: ""
        width: $symbol-2radius
        height: $symbol-2radius
        border-radius: 50vh
        display: inline-block
        position: absolute
        left: -2 * $symbol-2radius
        top: 50%
        transform: translateY(-50%)
        align-self: center

    &-desc
        @include plain-text
        color: #1D1D1D
        line-height: 1rem

